<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	<body>
		<div id="app">
			
			<div class="tradeBar" >
			   <div class="tradeContainer" style="width: 280vw;">
			    <div v-for="(item,index) in tradeList"
					 class="trade" 
					 :style="{'color': (item.selected?'#ffffff':'#000000'),'background-color': (item.selected?'#c7000a':'#ffffff')}"
					 v-on:click="tradeClick(index)">{{item.moduleName}}</div>
			   </div>
			
			  </div>
            
            <div id="table" class="bookcard">
                <div v-for="(book,index) in newsList" class="bookItem" v-on:click="toDetail(index)">
                    <img class="bookImage" :src="serverUrl+book.coverUrl" />
					<div class="bookName">{{book.title}}</div>
                </div>
            </div>
		</div>
	</body>
	<style type="text/css">
		.bookcard{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			place-items: center;
		}
        .bookName{
            font-size:3vw;
            max-width:26vw;
            margin-top:1vh;
        }
		.bookItem{
			width: 33vw;
			height: 45vw;
			display: flex;
			flex-direction: column;
			align-items: center;
            margin-top:10px;
		}
		.bookImage{
			width: 24vw;
			height: 32vw;
		}
	</style>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		   imageList: [],
		   newsList:[
			   
			   
		   ],
		   tradeList: JSON.parse(JSON.stringify(bookModuleList))
		  },
          created () {
              window.getNewsList = this.getNewsList
              window.clear = this.clear
              window.getImageList = this.getImageList
          },
		  methods:{
              getImageList (imageList) {
                  this.imageList = imageList
              },
              getNewsList (newsList) {
                  for(let i=0;i<newsList.length;i++){
                      let moudleInfo = JSON.parse(newsList[i].module)[0]

                      newsList[i].color = "#C7000A"
                      newsList[i].type = '在线学习'
                      newsList[i].showTime = moment(newsList[i].pushDate).format("YYYY-MM-DD")
                      if(JSON.stringify(moudleInfo) == "[1,2]") {
                          newsList[i].color = "#c7000a"
                          newsList[i].type = '安全学习'
                      }
                      if(JSON.stringify(moudleInfo) == "[1,3]") {
                          newsList[i].color = "#2196F3"
                          newsList[i].type = '岗位技能'
                      }
                      if(JSON.stringify(moudleInfo) == "[1,4]") {
                          newsList[i].color = "#FF9800"
                          newsList[i].type = '管理改善'
                      }
                      if(JSON.stringify(moudleInfo) == "[1,5]") {
                          newsList[i].color = "#4CAF50"
                          newsList[i].type = '精品课程'
                      }
                      if(JSON.stringify(moudleInfo) == "[6,8]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '企业风采'
                      }
                      if(JSON.stringify(moudleInfo) == "[6,12]") {
                          newsList[i].color = "#4CAF50"
                          newsList[i].type = '学习视频'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,11]") {
                          newsList[i].color = "#2196F3"
                          newsList[i].type = '基层一线'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,10]") {
                          newsList[i].color = "#4CAF50"
                          newsList[i].type = '行业快讯'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,14]") {
                          newsList[i].color = "#C7000A"
                          newsList[i].type = '集团要闻'
                      }
                      if(JSON.stringify(moudleInfo) == "[9,15]") {
                          newsList[i].color = "#FF9800"
                          newsList[i].type = '法律法规'
                      }
                      if(JSON.stringify(moudleInfo) == "[15,16]") {
                          newsList[i].color = "#2196F3"
                          newsList[i].type = '能工巧匠'
                      }
					  if(JSON.stringify(moudleInfo) == "[6,16]") {
					      newsList[i].color = "#C7000A"
					      newsList[i].type = '精选好文'
					  }
                      if(JSON.stringify(moudleInfo) == "[1,16]") {
                         newsList[i].color = "#C7000A"
                         newsList[i].type = '专题培训'
                     }
                      if(JSON.stringify(moudleInfo) == "[17,18]") {
                           newsList[i].color = "#FF9800"
                           newsList[i].type = '安全知识'
                       }
                       
                       if(JSON.stringify(moudleInfo) == "[17,19]") {
                           newsList[i].color = "#C7000A"
                           newsList[i].type = '安全文件'
                       }
                       
                       if(JSON.stringify(moudleInfo) == "[17,20]") {
                           newsList[i].color = "#4CAF50"
                           newsList[i].type = '安全视频'
                       }
                       
                       if(JSON.stringify(moudleInfo) == "[17,21]") {
                           newsList[i].color = "#2196F3"
                           newsList[i].type = '安全专题'
                       }
                       if(JSON.stringify(moudleInfo) == "[22,23]") {
                           newsList[i].color = "#4CAF50"
                           newsList[i].type = '班组园地'
                       }
                       if(JSON.stringify(moudleInfo) == "[22,24]") {
                           newsList[i].color = "#2196F3"
                           newsList[i].type = '他山之石'
                       }
                      this.newsList.push(newsList[i])
                  }
              },
              clear() {
                  this.newsList = []
              },
              
			  moduleClick (index){
				this.moduleList.forEach(item => {item.selected = false})
				this.moduleList[index].selected = true
                var params = {
                    module:this.moduleList[index].module
                }
                WebViewJavascriptBridge.callHandler('moduleChange',params,function(response) {
                                                                    
               });
    
			  },
              
			  tradeClick (index) {
				 this.tradeList.forEach(item => {item.selected = false})
				 this.tradeList[index].selected = true
                 var params = {
                     module:this.tradeList[index].module
                 }
                 WebViewJavascriptBridge.callHandler('tradeChange',params,function(response) {
                                                     
                 });
                },
              
              toDetail (index){
                    let book = this.newsList[index]
                    let params = {
                        dataId:book.dataId,
                        dataUrl:book.dataUrl
                    }
                    WebViewJavascriptBridge.callHandler('toBookDetail',params,function(response) {
                           
                    });
                }
		  }
		})
	</script>
</html>
